/**
 * @description 组件样式
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
 */
.pure-indicator {
    &--index {
        display: flex;
        flex-direction: var(--pure-indicator-direction, row);
        align-items: var(--pure-indicator-align-items, center);
        justify-content: var(--pure-indicator-justify-content, center);
        gap: var(--pure-indicator-gap, 5px);
        position: var(--pure-indicator-position, absolute);
        bottom: var(--pure-indicator-bottom, 10px);
        left: var(--pure-indicator-left, 50%);
        z-index: var(--pure-indicator-z-index, 10);
        padding: var(--pure-indicator-padding);
        transform: var(--pure-indicator-transform, translateX(-50%));
    }

    &__index {
        width: var(--pure-indicator-index-size, 2em);
        height: var(--pure-indicator-index-size, 2em);
        border-radius: var(--pure-indicator-index-radius, 50%);
        background: var(--pure-indicator-color, rgba(0, 0, 0, 0.3));
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: var(--pure-indicator-index-color, #ffffff);
        font-size: var(--pure-indicator-index-font-size, 0.7em);
        line-height: 1;
        border: var(--pure-indicator-index-border, 0) var(--pure-indicator-index-border-style, solid) var(--pure-indicator-active-color, transparent);
        transition: var(--pure-indicator-transition, 0.5s);
        font-weight: var(--pure-indicator-index-font-weight);

        &--active {
            background: var(--pure-indicator-active-color, var(--pure-theme-primary));
            color: var(--pure-indicator-index-active-color, #ffffff);
            font-weight: var(--pure-indicator-index-active-font-weight);
        }
    }

    &--static {
        position: var(--pure-indicator-position, static);
        margin: var(--pure-indicator-margin, 15px auto);
        transform: var(--pure-indicator-transform);
    }
}
